<template>
    <el-drawer v-model="isShow"
        size="50%"
        :destroy-on-close="true"
        @close="closeHandle"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false" 
    >
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </template>
        <el-form :model="form" label-width="auto" ref="formRef"  :rules="rules">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="选择案件" required prop="caseCaseinfoId">
                        <el-select v-model="form.caseCaseinfoId" @change="changecaseCaseinfo" :disabled="isApprove">
                            <el-option v-for="item in caseCaseOptions" 
                            :props="{ value: 'caseCaseinfoId', label: 'name' }"
                            :key="item.caseCaseinfoId"
                            :label="item.name"
                            :value="item.caseCaseinfoId"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="选择涉案人" required prop="caseByinquestId">
                        <el-select v-model="form.caseByinquestId" @change="changeByinquest" :disabled="isApprove">
                            <el-option v-for="item in caseByinquestOptions" 
                            :props="{ value: 'byinquestId', label: 'name' }"
                            :key="item.byinquestId" 
                            :label="item.name"
                            :value="item.byinquestId" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="姓名" required prop="userName">
                        <el-input v-model="form.userName" placeholder="请输入涉案人姓名"  :disabled="isApprove"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别" required prop="userSex">
                        <el-radio-group v-model="form.userSex" :disabled="isApprove">
                            <el-radio-button
                                v-for="item in sys_user_sex"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="涉案人身份" required prop="userType">
                        <el-select v-model="form.userType" placeholder="请输入涉案人身份" :disabled="isApprove">
                            <el-option
                                v-for="item in nj_sheanren_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄">
                        <el-input v-model="form.userAge" placeholder=""  :disabled="isApprove"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证号">
                        <el-input v-model="form.userCode" placeholder=""  :disabled="isApprove"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="民族">
                        <el-input v-model="form.userNation" placeholder=""  :disabled="isApprove"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="健康状况">
                        <el-input v-model="form.userHealthy" placeholder=""  :disabled="isApprove"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电子卡号">
                        <el-input v-model="form.userCardcode" placeholder="" :disabled="isApprove" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="备注">
                        <el-input v-model="form.userremark" placeholder=""  :disabled="isApprove"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submitHandle" v-if="ishowBtn">确认添加</el-button>
            <el-button @click="isShow=false" style="margin-left:20px">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import { getCurrentInstance } from "vue";

import {getCaseInfoList} from "@/api/CaseInfo/CaseInfo";
import {getByinquestList,getByinquestInfo} from "@/api/byinquest/byinquest";

import { createRoom, editRoom, getRoomInfo, getRoomTypeList } from "@/api/Room/room";
import { listDept, } from "@/api/system/dept";
import { getUserProfile } from "@/api/system/user";


const { proxy } = getCurrentInstance()
const { sys_normal_disable, nj_sheanren_type, sys_user_sex,nj_sex} = proxy.useDict('sys_normal_disable', 'nj_sheanren_type', 'sys_user_sex', 'nj_sex')
// 是否显示抽屉
const isShow = ref(false)
const isnew = ref(true)

// 抽屉标题
const ishowBtn = ref(false)
const isApprove = ref(false)

const title = ref('查看案件信息')
// 案件列表
const caseCaseOptions = ref([])
// 涉案人列表
const caseByinquestOptions = ref([]);
const EditIndex = ref(null);
// 通知事件
const emit = defineEmits(['ByinquestList'])

const rules = {
    caseCaseinfoId: [{ required: true, message: "案件不能为空", trigger: "blur" }],
    caseByinquestId: [{ required: true, message: "涉案人不能为空", trigger: "blur" }],
    userName: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
    userSex: [{ required: true, message: "性别不能为空", trigger: "blur" }],
    userType: [{ required: true, message: "涉案人身份不能为空", trigger: "blur" }]
}

// 房间
const form = ref({
    userSex:1,
    
})
// 关闭后回调
const defaultQuery = {
}
onMounted(() => {
    
})

const changeShowStatus = () => {
    isShow.value = !isShow.value
}
const isButtonDisabled = ref(false);

// 获取个人信息
const getUserInfo = async () => {
    await getUserProfile().then(res => {
        const page = {pageNum: 1,pageSize: 999}
        const queryParams = {
            userId:res.data.userId,
            state:'1,2'
        }
        getCaseInfoList(queryParams,page).then(CaseInfoList => {
            caseCaseOptions.value = CaseInfoList.rows
          });
    })
}

function changecaseCaseinfo(value) {
        // 根据案件ID获取涉案人
    form.value.caseByinquestId = ""
    form.value.userName = ""
    form.value.userSex = ""
    form.value.userType = ""
    form.value.userAge = ""
    form.value.userCode = ""
    form.value.userNation = ""
    form.value.userHealthy = ""
    form.value.userCardcode = ""
    form.value.userremark = ""

    const selectedItem = caseCaseOptions.value.find(item => item.caseCaseinfoId == value);

    form.value.caseName = selectedItem.name
    const caseid = { caseId:value}
    getByinquestLists(caseid)
};
const getByinquestLists = async (caseid) => {
    await getByinquestList(caseid).then(res => {
        caseByinquestOptions.value = res.rows
        if(isnew.value){
            if(caseByinquestOptions.value[0]){
                form.value.caseByinquestId = caseByinquestOptions.value[0].byinquestId
                changeByinquest(caseByinquestOptions.value[0].byinquestId)
            }
        }
        
       
    })
}
function changeByinquest(value) {
        // 根据涉案人ID获取 涉案人信息详情
    const caseid = { id:value}
    getByinquestData(caseid)
};
const getByinquestData = async (caseid) => {
    await getByinquestInfo(caseid).then(res => {
        form.value = {
            ...form.value,
            status:res.data.state,
            userName:res.data.name,
            userSex:res.data.sex,
            userType:res.data.type,
            userAge:res.data.age,
            userCode:res.data.code,
            userNation:res.data.nation,
            userHealthy:res.data.userHealthy,
            userCardcode:res.data.userCardcode,
            userremark:res.data.remark
        }
    })
}

// 添加办案区使用申请
const showAddjwApplydetailList = (data,) => {
    isnew.value = true
    ishowBtn.value = true
    isApprove.value = false
    title.value = '添加案件信息';
    EditIndex.value = null
    caseByinquestOptions.value = []
    reset();
    // 获取承办人相关的案件
    getUserInfo()
    changeShowStatus()
}

// 修改办案区使用申请
const showEditjwApplydetailList = async (data,index,tittleV,formTypeV) => {
    isnew.value = false
    if(formTypeV == 'addEdit'){
        title.value = tittleV
        isApprove.value = false
        ishowBtn.value = true
    }
    if(formTypeV == 'See'){
        title.value = tittleV
        isApprove.value = true
        ishowBtn.value = false
    }
    if(formTypeV == 'isApprove'){
        title.value = tittleV
        isApprove.value = true
        ishowBtn.value = false
    }
    EditIndex.value = index
    getUserInfo()
    const caseid = { caseId:data.caseCaseinfoId}
    getByinquestLists(caseid)
    form.value = data
    changeShowStatus()
}

const submitHandle = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            emit('ByinquestList', form.value,EditIndex.value)
            EditIndex.value = null
            changeShowStatus()
         }
});
}

defineExpose({ showAddjwApplydetailList, showEditjwApplydetailList })



// 关闭后的回调事件
const closeHandle = () => {
    form.value = defaultQuery
}
/** 重置操作表单 */
function reset() {
    form.value = {
        roomname: undefined,
        roomcode: undefined,
        roomtypeId: undefined,
        unitId: undefined,
        policeareaId: undefined,
        state: '0',
    };
};
</script>

<style lang="scss" scoped>
h4 {
    margin: 10px 0;
}
</style>